<script>
  import { onMount } from "svelte";
  import Store from "../utils/Store";
  import ListFiles from "./ListFiles.svelte";
  import Editor from "./Editor.svelte";
  import "@material/mwc-fab";

  const KEY_STORE = "5bd1497ac1b4328195275a153cb32db5";

  let cfg = {
    current: "qps",
  };

  let logContent = "";

  onMount(async () => {
    cfg = Store.get(KEY_STORE) || cfg;
  });

  (async () => {
    if (location.pathname == "/log-view") {
      logContent = await (await fetch("/log-content")).text();
    }
  })();
</script>

{#if location.pathname == "/log-view"}
  <div class="editor-container">
    <Editor
      saveState="false"
      guid="a9087fadfd4eaae248fddcb6c74c021c"
      language="log"
      editorOption={{
        wordWrap: "off",
      }}
      content={logContent}
    />
  </div>

  <mwc-fab
    icon="home"
    on:click={() => {
      location.href = "/";
    }}
  />
{:else}
  <ListFiles />

  <mwc-fab
    icon="engineering"
    on:click={() => {
      location.href = "/log-view";
    }}
  />
{/if}

<style>
  div {
    height: 100%;
  }

  .editor-container {
    width: 100%;
    height: 100%;
  }

  mwc-fab {
    position: fixed;
    right: 3em;
    bottom: 3em;
  }
</style>
